<%--
  Created by IntelliJ IDEA.
  User: 86131
  Date: 2021/9/2
  Time: 15:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>管理员界面</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/echarts.min.js"></script>
</head>
<body>
<div class="container" id="main" style="width: 600px;height:400px;"></div>
<div class="container">
    <h3>已购买车票</h3>
    <table class="table table-hover">
        <%--            表格头--%>
        <tr class="success">
            <th>编号</th>
            <th>用户id</th>
            <th>车次</th>
            <th>日期</th>
            <th>发站</th>
            <th>到站</th>
            <th>车厢号</th>
            <th>座位</th>
            <th>状态</th>
        </tr>

        <%--    获取 到的真实数据--%>
        <c:forEach items="${all}" var="ticket" varStatus="s">
            <tr>
                <td>${s.count}</td>
                <td>${ticket.id}</td>
                <td>${ticket.trainNumber}</td>
                <td>${ticket.date}</td>
                <td>${ticket.startStation}<br>
                        ${ticket.startTime}
                </td>
                <td>${ticket.endStation}<br>
                        ${ticket.endTime}
                </td>
                <td>${ticket.vehicleNumber}</td>
                <td>${ticket.seatNumber}</td>
                <td>${ticket.status}</td>
            </tr>
        </c:forEach>
    </table>
</div>




<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '火车票销售统计'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: [${x}]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [${y}]
        }]
    };
    console.log(option.xAxis.data)
    console.log(option.series.data)
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>
